<template>
  <div class="usage-guide">
    <h1>使用指南</h1>
    
    <div class="guide-section">
      <h2>系统概述</h2>
      <p>AI药物相互作用检查器是一个智能医疗辅助系统，旨在帮助医护人员和患者识别潜在的药物相互作用风险，提供个性化的用药建议，确保用药安全。</p>
    </div>
    
    <div class="guide-section">
      <h2>工作流程</h2>
      <ol>
        <li><strong>药物清单管理</strong> - 添加和管理患者的当前用药清单</li>
        <li><strong>相互作用检测</strong> - 系统自动检测药物清单中可能存在的相互作用</li>
        <li><strong>患者特征分析</strong> - 输入患者的年龄、体重、肝肾功能等特征信息</li>
        <li><strong>风险等级评估</strong> - 结合患者特征评估相互作用的风险等级</li>
        <li><strong>替代药物推荐</strong> - 为高风险药物提供安全的替代方案</li>
        <li><strong>医生审核界面</strong> - 提供专业的报告供医生审核和决策</li>
      </ol>
    </div>
    
    <div class="guide-section">
      <h2>详细操作说明</h2>
      
      <h3>1. 药物清单管理</h3>
      <p>在"药物清单"页面，您可以：</p>
      <ul>
        <li>查看当前已添加的药物</li>
        <li>添加新药物（包括药物名称、剂量、频次、给药途径）</li>
        <li>删除不需要的药物</li>
      </ul>
      
      <h3>2. 相互作用检测</h3>
      <p>在"相互作用检测"页面，系统会：</p>
      <ul>
        <li>自动检查药物清单中所有药物的相互作用</li>
        <li>从openFDA数据库获取权威数据</li>
        <li>使用AI技术进行深度分析</li>
        <li>提供详细的风险描述和处理建议</li>
      </ul>
      
      <h3>3. 患者特征分析</h3>
      <p>在"患者特征"页面，需要输入：</p>
      <ul>
        <li>年龄、体重、性别</li>
        <li>肝肾功能状态</li>
        <li>药物过敏史</li>
      </ul>
      
      <h3>4. 风险等级评估</h3>
      <p>系统将根据：</p>
      <ul>
        <li>药物相互作用的严重程度</li>
        <li>患者个体特征</li>
        <li>临床指南和文献</li>
      </ul>
      <p>综合评估每个相互作用的风险等级（高/中/低）。</p>
      
      <h3>5. 替代药物推荐</h3>
      <p>对于高风险药物，系统将：</p>
      <ul>
        <li>推荐安全性更高的替代药物</li>
        <li>提供替代药物的详细信息</li>
        <li>说明替代方案的注意事项</li>
      </ul>
      
      <h3>6. 医生审核界面</h3>
      <p>为医生提供：</p>
      <ul>
        <li>完整的药物相互作用报告</li>
        <li>风险评估结果</li>
        <li>处理建议和替代方案</li>
        <li>可打印的专业报告</li>
      </ul>
    </div>
    
    <div class="guide-section">
      <h2>注意事项</h2>
      <ul>
        <li>本系统仅作为辅助工具，不能替代专业医疗判断</li>
        <li>所有检测结果请结合临床实际情况进行判断</li>
        <li>如有疑问，请咨询专业医生或药师</li>
        <li>定期更新药物清单以确保检测准确性</li>
      </ul>
    </div>
    
    <div class="navigation-buttons">
      <button @click="goToMedications" class="start-btn">开始使用系统</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goToMedications = () => {
  router.push('/medications')
}
</script>

<style scoped>
.usage-guide {
  max-width: 1200px;
  margin: 0 auto;
}

.guide-section {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.guide-section h2 {
  color: #42b983;
  border-bottom: 2px solid #42b983;
  padding-bottom: 0.5rem;
  margin-top: 0;
}

.guide-section h3 {
  color: #1976d2;
}

.guide-section ol,
.guide-section ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.guide-section li {
  margin-bottom: 0.5rem;
}

.navigation-buttons {
  text-align: center;
  margin-top: 2rem;
}

.start-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.start-btn:hover {
  background-color: #359c6d;
}
</style>